<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>列表页</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="http://layui.hcwl520.com.cn/layui-v2.4.5/css/layui.css?v=201811010202" rel="stylesheet"></link>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>文章列表页</legend>
	</fieldset>
	<table class="layui-hide" id="articleTable"  lay-filter="article"></table>
	<script type="text/html" id="barDemo">
		 <a class="layui-btn layui-btn-xs" lay-event="commnet">留言</a>
		 <a class="layui-btn layui-btn-xs" lay-event="visit">访问量</a>
		 <a class="layui-btn layui-btn-xs" lay-event="friends">朋友分享量</a>
		 <a class="layui-btn layui-btn-xs" lay-event="circle">朋友圈分享量</a>
	</script>
	<script type="text/html" id="indexTpl">
   		 {{d.LAY_TABLE_INDEX+1}}
	</script>
</body>
<script type="text/javascript" src="http://layui.hcwl520.com.cn/jquery/jquery-3.3.1.min.js?v=201804251754"></script>
<script type="text/javascript" src="http://layui.hcwl520.com.cn/layui-v2.4.5/layui.all.js?v=201811010202"></script>
<script>
layui.use(['laypage', 'layer', 'table',], function(){
	  table = layui.table //表格
	  table.render({
	    elem: '#articleTable'
	    ,url: 'articleList' //数据接口
	    ,title: '文章列表'
	    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
	    ,cellMinWidth: 30
	    ,cols: [[ //表头
	      {type: 'checkbox', fixed: 'left'}
	      ,{field:'id', title:'序号',fixed: 'left',width:70, unresize: true, sort: true, templet: '#indexTpl' }
	      ,{field: 'title', title: '标题', fixed: 'left'}
	      ,{field: 'describe', title: '描述' }
	      ,{field: 'link', title: '文章地址' , width:200}
	      ,{field: 'createDate', title: '发表时间', width:168, sort: true}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:290}
	    ]]
	 	 ,even: true //隔行背景
	 	 ,page: true
	    ,response: {
	      statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
	    }
	    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
	      return {
	    	 "code": '200',
	        "count": res.totalElements, //解析数据长度
	        "data":res.content
	      };
	  	}
	  });
	  //监听头工具栏事件
	  table.on('toolbar(article)', function(obj){
	    var checkStatus = table.checkStatus(obj.config.id)
	    ,data = checkStatus.data; //获取选中的数据
	    switch(obj.event){
	      case 'add':
	        layer.open({
	            type: 2 //此处以iframe举例
	            ,title: '添加'
	            ,area: ['800px', '500px']
	            ,shade: 0.8
	            ,maxmin: true
	            ,content: 'toNewPage'
	            ,btn: ['保存', '关闭'] //只是为了演示
	        	,yes : function(index, layero) { // 保存按钮回调函数
					var body = layer.getChildFrame('body', index);
					body.find('#articleSubmint').click();
				}
				,btn2 : function(index, layero) { // 取消按钮回调函数
					layer.close(index); // 关闭弹出层
					}
				,end: function () {
                    window.location.reload();
                }
	          });
	      break;
	      case 'update':
	        if(data.length === 0){
	          layer.msg('请选择一行');
	        } else if(data.length > 1){
	          layer.msg('只能同时编辑一个');
	        } else {
	        	layer.open({
		            type: 2 //此处以iframe举例
		            ,title: '修改'
		            ,area: ['800px', '500px']
		            ,shade: 0.8
		            ,maxmin: true
		            ,content: 'toUpdatePage?id='+checkStatus.data[0].id
		            ,btn: ['修改', '关闭'] //只是为了演示
		        	,yes : function(index, layero) { // 保存按钮回调函数
						var body = layer.getChildFrame('body', index);
						body.find('#articleSubmint').click();
					}
					,btn2 : function(index, layero) { // 取消按钮回调函数
						layer.close(index); // 关闭弹出层
						}
					,end: function () {
	                    window.location.reload();
	                }
		          });
	        }
	      break;
	      case 'delete':
	        if(data.length === 0){
	          layer.msg('请选择一行');
	        } else {
	           $.ajax({
	               type: "POST",
	               url: "delArticle",
	               data: JSON.stringify(data),
	               contentType: 'application/json',
	               cache: false,
	               success: function(){
	            	   layer.msg('删除成功');
	            	   window.location.reload();
	               }
	           });
	        }
	      break;
	    };
	  });
	  //监听行工具事件
	  table.on('tool(article)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    if(layEvent === 'commnet'){
	    	 if(data.length === 0){
		          layer.msg('请选择一行');
		        } else {
		        	var perContent=layer.open({
		                type: 2 //此处以iframe举例
		                ,title: '留言'
		                ,area: ['800px', '600px']
		                ,shade: 0.8
		                ,anim: 5
		                ,maxmin: true
		                ,content: 'toCommentList?id='+obj.data.id
		                ,btn: ['关闭'] //只是为了演示
		            	,yes : function(index, layero) { // 保存按钮回调函数
		            		layer.close(index); // 关闭弹出层
		        		}
		              });
		        	layer.full(perContent);
		       }
	    }else if(layEvent === 'visit'){
	    	 if(data.length === 0){
		          layer.msg('请选择一行');
		        } else {
		        	var perContent=layer.open({
		                type: 2 //此处以iframe举例
		                ,title: '访问量'
		                ,area: ['800px', '600px']
		                ,shade: 0.8
		                ,anim: 5
		                ,maxmin: true
		                ,content: 'toCountPage?id='+obj.data.id
		                ,btn: ['关闭'] //只是为了演示
		            	,yes : function(index, layero) { // 保存按钮回调函数
		            		layer.close(index); // 关闭弹出层
		        		}
		              });
		        	layer.full(perContent);
		       }
	    }else if(layEvent === 'friends'){
	    	 if(data.length === 0){
		          layer.msg('请选择一行');
		        } else {
		        	var perContent=layer.open({
		                type: 2 //此处以iframe举例
		                ,title: '访问量'
		                ,area: ['800px', '600px']
		                ,shade: 0.8
		                ,anim: 5
		                ,maxmin: true
		                ,content: 'toCountFriendsPage?id='+obj.data.id
		                ,btn: ['关闭'] //只是为了演示
		            	,yes : function(index, layero) { // 保存按钮回调函数
		            		layer.close(index); // 关闭弹出层
		        		}
		              });
		        	layer.full(perContent);
		       }
	    }else if(layEvent === 'circle'){
	    	 if(data.length === 0){
		          layer.msg('请选择一行');
		        } else {
		        	var perContent=layer.open({
		                type: 2 //此处以iframe举例
		                ,title: '访问量'
		                ,area: ['800px', '600px']
		                ,shade: 0.8
		                ,anim: 5
		                ,maxmin: true
		                ,content: 'toCountCirclePage?id='+obj.data.id
		                ,btn: ['关闭'] //只是为了演示
		            	,yes : function(index, layero) { // 保存按钮回调函数
		            		layer.close(index); // 关闭弹出层
		        		}
		              });
		        	layer.full(perContent);
		       }
	    }   
	  });
});
</script>
</html>

